import 'package:flutter/material.dart';
import 'package:portal_website/pages/common_header.dart';

class KnowledgeCenterPage extends StatefulWidget {
  const KnowledgeCenterPage({super.key});

  @override
  State<KnowledgeCenterPage> createState() => _KnowledgeCenterPageState();
}

class _KnowledgeCenterPageState extends State<KnowledgeCenterPage> {
  String _activeSection = 'home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: Container(
        margin: EdgeInsets.only(top: 50),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Breadcrumb(
                text: "首页 > 服务平台 > 知识中枢",
              ),
              // 主要内容区
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 侧边栏
                  _buildSidebar(),
                  // 主内容
                  Expanded(child: _buildMainContent()),
                ],
              ),
              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  // 头部
  Widget _buildHeader() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 20,
            offset: Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 30),
      margin: const EdgeInsets.only(bottom: 30),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            '创新服务平台',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth < 600) {
                return const SizedBox.shrink();
              }
              return _buildNavigation();
            },
          ),
        ],
      ),
    );
  }

  // 导航菜单
  Widget _buildNavigation() {
    return Row(
      children: [
        _navItem('首页'),
        _navItem('智算中心'),
        _navItem('知识中枢', isActive: true),
        _navItem('模型中枢'),
        _navItem('联系我们'),
      ],
    );
  }

  // 导航项
  Widget _navItem(String title, {bool isActive = false}) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: Text(
        title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 16,
          fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
        ),
      ),
    );
  }

  // 面包屑
  Widget _buildBreadcrumb() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15),
      child: Text(
        '首页 > 服务平台 > 知识中枢',
        style: TextStyle(
          color: const Color(0xFF666666),
          fontSize: 14,
        ),
      ),
    );
  }

  // 侧边栏
  Widget _buildSidebar() {
    return Container(
      width: 250,
      padding: const EdgeInsets.all(20),
      margin: const EdgeInsets.only(right: 30),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '知识中枢',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          _sidebarItem('首页', 'home'),
          _sidebarItem('建设概况', 'construction'),
          _sidebarItem('政策资讯', 'policy'),
          _sidebarItem('活动报道', 'activity'),
          _sidebarItem('服务介绍', 'service'),
        ],
      ),
    );
  }

  // 侧边栏项
  Widget _sidebarItem(String title, String section) {
    final isActive = _activeSection == section;
    return Padding(
      padding: const EdgeInsets.only(bottom: 15),
      child: InkWell(
        onTap: () {
          setState(() {
            _activeSection = section;
          });
        },
        borderRadius: const BorderRadius.all(Radius.circular(4)),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
          decoration: BoxDecoration(
            color: isActive ? const Color(0xFFF0F7FF) : Colors.transparent,
            borderRadius: const BorderRadius.all(Radius.circular(4)),
          ),
          child: Row(
            children: [
              if (isActive)
                const Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: VerticalDivider(
                    width: 4,
                    thickness: 4,
                    color: Color(0xFF207CCA),
                  ),
                ),
              Text(
                title,
                style: TextStyle(
                  color: isActive
                      ? const Color(0xFF1E5799)
                      : const Color(0xFF555555),
                  fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 主内容区
  Widget _buildMainContent() {
    return Container(
      padding: const EdgeInsets.all(30),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: _getSectionContent(),
    );
  }

  // 根据当前激活的部分显示对应内容
  Widget _getSectionContent() {
    switch (_activeSection) {
      case 'home':
        return _buildHomeSection();
      case 'construction':
        return _buildConstructionSection();
      case 'service':
        return _buildServiceSection();
      default:
        return _buildHomeSection();
    }
  }

  // 首页内容
  Widget _buildHomeSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '知识中枢',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const SizedBox(height: 20),
        const Text(
          '汇聚行业知识精华，构建智能化知识服务体系',
          style: TextStyle(
            color: Color(0xFF666666),
            fontSize: 16,
          ),
        ),
        const SizedBox(height: 30),
        // 介绍图片
        Container(
          height: 300,
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: const BorderRadius.all(Radius.circular(8)),
          ),
          child: const Center(
            child: Text(
              '知识中枢',
              style: TextStyle(
                color: Colors.grey,
                fontSize: 24,
              ),
            ),
          ),
        ),
        const SizedBox(height: 20),
        // 内容文本
        const Text(
          '知识中枢是创新服务平台的核心知识基础设施，集成了行业知识库、专家资源库和智能问答系统，为企业、科研机构和政府部门提供全方位的知识服务支持。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '中枢汇聚了超过100万篇行业文献、50万项专利数据、10万份技术报告和5千位行业专家资源，通过人工智能技术实现知识的智能检索、关联分析和应用推荐。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '知识中枢采用多模态知识图谱技术，将结构化数据和非结构化文本深度融合，构建了覆盖多个领域的知识网络，为用户提供精准、高效的知识服务。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 30),
        // 核心资源
        const Text(
          '核心资源',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 30),
        // 资源网格
        GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          childAspectRatio: 1.5,
          children: [
            _buildResourceCard(
              icon: '📚',
              title: '行业知识库',
              description: '涵盖科技、经济、产业等多个领域的专业文献、研究报告和技术标准',
            ),
            _buildResourceCard(
              icon: '🧑‍💻',
              title: '专家资源库',
              description: '汇集各领域专家学者，提供咨询、评审和技术支持服务',
            ),
            _buildResourceCard(
              icon: '🔍',
              title: '智能检索系统',
              description: '基于自然语言处理的智能搜索，精准匹配用户知识需求',
            ),
            _buildResourceCard(
              icon: '📊',
              title: '数据分析平台',
              description: '提供数据可视化、趋势分析和知识发现工具',
            ),
          ],
        ),
      ],
    );
  }

  // 资源卡片
  Widget _buildResourceCard({
    required String icon,
    required String title,
    required String description,
  }) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        border: Border.all(color: const Color(0xFFE0E9FF)),
        borderRadius: const BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: const Offset(0, 5),
            spreadRadius: -10,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            icon,
            style: const TextStyle(fontSize: 36, color: Color(0xFF207CCA)),
          ),
          const SizedBox(height: 15),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  // 建设概况内容
  Widget _buildConstructionSection() {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '建设概况',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 28,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          const Text(
            '知识中枢的发展历程与建设成果',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          // 介绍图片
          Container(
            height: 300,
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: const Center(
              child: Text(
                '知识中枢建设',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 24,
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
          // 内容文本
          const Text(
            '知识中枢于2022年启动建设，总投资3亿元人民币，是区域规模最大、知识资源最丰富的公共知识服务平台。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            '中枢建设分为三个阶段：一期工程（2022-2023年）完成了基础平台搭建和核心知识库建设；二期工程（2023-2024年）实现了多模态知识融合和智能服务升级；三期工程（2024-2025年）将重点打造行业垂直知识库和专家协同网络。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
        ],
      ),
    );
  }

  // 服务介绍内容
  Widget _buildServiceSection() {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '服务介绍',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 28,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          const Text(
            '知识中枢提供的各类知识服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          // 服务列表
          Column(
            children: [
              _buildServiceItem(
                title: '知识检索服务',
                imageText: '知识检索',
                description:
                    '提供智能化的知识检索服务，支持关键词搜索、语义检索和问答式搜索等多种方式。我们的检索系统基于深度学习技术，能够准确理解用户意图，返回最相关的知识内容。',
                features: ['多模态检索', '语义理解', '个性化推荐'],
                scenarios: ['科研文献检索', '技术方案查询', '政策法规查找等'],
              ),
              const SizedBox(height: 30),
              _buildServiceItem(
                title: '专家咨询服务',
                imageText: '专家咨询',
                description:
                    '连接各领域专家资源，为用户提供专业咨询服务。通过在线问答、视频咨询和线下服务等多种形式，解决用户的专业问题。',
                features: ['多领域专家', '灵活服务方式', '快速响应'],
                scenarios: ['技术难题解决', '项目评审', '专业培训等'],
              ),
              const SizedBox(height: 30),
              _buildServiceItem(
                title: '知识图谱服务',
                imageText: '知识图谱',
                description: '提供行业知识图谱构建和应用服务，帮助用户梳理领域知识体系，发现知识关联和价值。',
                features: ['领域定制', '可视化展示', '智能分析'],
                scenarios: ['企业知识管理', '学科体系建设', '技术路线规划等'],
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 服务项
  Widget _buildServiceItem({
    required String title,
    required String imageText,
    required String description,
    required List<String> features,
    required List<String> scenarios,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 15),
        Container(
          decoration: const BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Color(0xFFF0F0F0),
                width: 1,
              ),
            ),
          ),
          padding: const EdgeInsets.only(bottom: 10),
        ),
        const SizedBox(height: 15),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 服务图片
            Container(
              width: 300,
              height: 200,
              margin: const EdgeInsets.only(right: 20),
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: const BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 10,
                    offset: const Offset(0, 3),
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  imageText,
                  style: const TextStyle(
                    color: Colors.grey,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
            // 服务文本
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    description,
                    style: const TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 15,
                      height: 1.8,
                    ),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    '服务特点：${features.join('、')}',
                    style: const TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 15,
                      height: 1.8,
                    ),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    '适用场景：${scenarios.join('、')}',
                    style: const TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 15,
                      height: 1.8,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

  // 页脚
  Widget _buildFooter() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(top: 50),
      decoration: const BoxDecoration(
        color: Color(0xFF1A1A2E),
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
      child: Column(
        children: [
          // 页脚链接
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _footerLink('关于我们'),
              _footerLink('服务条款'),
              _footerLink('隐私政策'),
              _footerLink('帮助中心'),
              _footerLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台知识中枢 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：knowledge@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  // 页脚链接
  Widget _footerLink(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }
}
